<template>
	<view class="data-box">
		<view class="data-fixed-box">
			<!-- 搜索框 -->
			<view class="search">
				<input class="ipt-search" @input="searchContent" type="text" :value="searchTxt" placeholder="搜索单号/客户/货品/备注"/>
				<view class="i-search" @click="search"><text class="icon-font" >&#xe605;</text></view>
			</view>
			
			<!-- 根据单据筛选 -->
			<view class="change-bills-box">
				<view class="item" v-for="(item,index) in billsList" @click="changeBills(item)"
					:key="index" :class="billsIndex == item.id ? 'active' : ''">{{item.title}}
					<text class="new-bills" v-if="item.newBills && item.newBills > 0">{{item.newBills < 10 ? item.newBills : '9+'}}</text>
				</view>
			</view>
			
			<!-- 第二层筛选 -->
			<view class="screening-box">
				<!-- 单据状态筛选 -->
				<view>{{billsState}}<text class="icon-font" >&#xe63e;</text></view>
				<!-- 时间筛选-->
				<view class="divider">|</view>
				<view>{{timeState}}<text class="icon-font" >&#xe63e;</text></view>
				<!-- 门店筛选   检测用户是否有权 -->
				<view class="divider">|</view>
				<view>{{storesState}}<text class="icon-font" >&#xe63e;</text></view>
				<view class="divider">|</view>
				<!-- 经手人筛选  检测用户是否有权 -->
				<view>{{handlersState}}<text class="icon-font" >&#xe63e;</text></view>
			</view>
		</view>
		
		<!-- 单据列表模块 -->
		<view class="bills-box">
			<!-- 单条单据 -->
			<view class="item" v-for="(item,index) in billsData" :key="index">
				<!-- 单据上部分 -->
				<view class="item-t">
					<view class="i-t-a-a">
						<view class="i-t-a-a-name">{{item.name}}</view>
						<view class="i-t-a-a-sname">{{item.sname}}</view>
					</view>
					<view class="i-t-a-b">
						<text class="i-t-a-b-from">{{item.from}}</text>
						<view class="i-t-a-b-active">{{item.active}}</view>
					</view>
				</view>
				<!-- 单据下部分 -->
				<view class="item-b">
					<view class="item-b-a">
						<view class="item-b-a-a"> <text class="icon-font" >&#xe639;</text>{{item.bills_num}}</view>
						<view class="item-b-a-b">{{item.time}}</view>
					</view>
					<view class="item-b-b">
						<view class="b-b-l">
							<view class="b-b-l-a">
								<view class="b-b-l-sadd"> <text class="icon-font" >&#xe710;</text>{{item.saddress}}</view>
								<view class="b-b-l-hand">{{item.handlers}}</view>
							</view>
							<view class="b-b-l-b">
								<view class="b-b-l-price"> <text class="icon-font" >&#xe6ac;</text>{{item.total_price}}</view>
								<view class="divider">|</view>
								<view class="b-b-l-arrears">{{item.arrears}}</view>
							</view>
						</view>
						<view class="b-b-r">
							<view class="b-b-r-pay">{{item.Pay_status}}</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				searchTxt : "",
				billsIndex : 1,
				billsList : [
					{
						title:"云店单",
						id : 1,
						newBills : 199,
					},
					{
						title:"销售单",
						id : 2,
						newBills : 31,
					},
					{
						title:"退货单",
						id : 3,
						newBills : 13,
					},
					{
						title:"草稿单",
						id : 4,
					},
					{
						title:"已作废",
						id : 5,
						newBills : 5,
					},
				],
				
				billsData : [
					{
						name : "李老板",
						sname : "小美美容",
						from : "云单",
						active : "待发货",
						bills_num : "GZAA190609002",
						time : "2020-12-30 13:14",
						saddress : "广州店",
						handlers : "张丽",
						Pay_status : "未付款",
						total_price : 900,
						arrears : "欠360"
					},
					{
						name : "李老板",
						sname : "小美美容",
						from : "云单",
						active : "待发货",
						bills_num : "GZAA190609002",
						time : "2020-12-30 13:14",
						saddress : "广州店",
						handlers : "张丽",
						Pay_status : "未付款",
						total_price : 900,
						arrears : "欠360"
					},
					{
						name : "李老板",
						sname : "小美美容",
						from : "云单",
						active : "待发货",
						bills_num : "GZAA190609002",
						time : "2020-12-30 13:14",
						saddress : "广州店",
						handlers : "张丽",
						Pay_status : "未付款",
						total_price : 900,
						arrears : "欠360"
					},
					{
						name : "李老板",
						sname : "小美美容",
						from : "云单",
						active : "待发货",
						bills_num : "GZAA190609002",
						time : "2020-12-30 13:14",
						saddress : "广州店",
						handlers : "张丽",
						Pay_status : "未付款",
						total_price : 900,
						arrears : "欠360"
					},
					{
						name : "李老板",
						sname : "小美美容",
						from : "云单",
						active : "待发货",
						bills_num : "GZAA190609002",
						time : "2020-12-30 13:14",
						saddress : "广州店",
						handlers : "张丽",
						Pay_status : "未付款",
						total_price : 900,
						arrears : "欠360"
					},
					{
						name : "李老板",
						sname : "小美美容",
						from : "云单",
						active : "待发货",
						bills_num : "GZAA190609002",
						time : "2020-12-30 13:14",
						saddress : "广州店",
						handlers : "张丽",
						Pay_status : "未付款",
						total_price : 900,
						arrears : "欠360"
					},
					{
						name : "李老板",
						sname : "小美美容",
						from : "云单",
						active : "待发货",
						bills_num : "GZAA190609002",
						time : "2020-12-30 13:14",
						saddress : "广州店",
						handlers : "张丽",
						Pay_status : "未付款",
						total_price : 900,
						arrears : "欠360"
					},
					{
						name : "李老板",
						sname : "小美美容",
						from : "云单",
						active : "待发货",
						bills_num : "GZAA190609002",
						time : "2020-12-30 13:14",
						saddress : "广州店",
						handlers : "张丽",
						Pay_status : "未付款",
						total_price : 900,
						arrears : "欠360"
					},
					{
						name : "李老板",
						sname : "小美美容",
						from : "云单",
						active : "待发货",
						bills_num : "GZAA190609002",
						time : "2020-12-30 13:14",
						saddress : "广州店",
						handlers : "张丽",
						Pay_status : "未付款",
						total_price : 900,
						arrears : "欠360"
					},
					{
						name : "李老板",
						sname : "小美美容",
						from : "云单",
						active : "待发货",
						bills_num : "GZAA190609002",
						time : "2020-12-30 13:14",
						saddress : "广州店",
						handlers : "张丽",
						Pay_status : "未付款",
						total_price : 900,
						arrears : "欠360"
					},
					{
						name : "李老板",
						sname : "小美美容",
						from : "云单",
						active : "待发货",
						bills_num : "GZAA190609002",
						time : "2020-12-30 13:14",
						saddress : "广州店",
						handlers : "张丽",
						Pay_status : "未付款",
						total_price : 900,
						arrears : "欠360"
					},
					{
						name : "李老板",
						sname : "小美美容",
						from : "云单",
						active : "待发货",
						bills_num : "GZAA190609002",
						time : "2020-12-30 13:14",
						saddress : "广州店",
						handlers : "张丽",
						Pay_status : "未付款",
						total_price : 900,
						arrears : "欠360"
					}
				],
				
				billsState : "已确认",
				timeState : "本月",
				storesState : "门店",
				handlersState : "经手人",
			};
		},
		
		methods: {
			/*** 搜索内容 ***/
			searchContent(e)
			{
				this.searchTxt = e.detail.value;
			},
			
			/*** 点击搜索按钮 ***/
			search()
			{
				console.log("点击了搜索按钮==>搜索：",this.searchTxt);
			},
			
			/*** 根据单据类型筛选 ***/
			changeBills(item)
			{
				if(this.billsIndex == item.id) return;
				this.billsIndex = item.id;
				console.log("根据单据类型筛选 ==>   选中了",item.title);
			}
		}
	}
</script>
<style lang="scss">
	.data-box
	{
		box-sizing: border-box;
		width: 380px;
		height: 100vh;
		border-right: 1px solid #CCC;
		overflow-y: auto;
		.data-fixed-box
		{	
			width: 380px;
			box-sizing: border-box;
			border-right: 1px solid #CCC;
			position: fixed;
			top: 0;
			background: #FFF;
			.search
			{
				width: 380px;
				height: 60px;
				position: relative;
				display: flex;
				align-items: center;
				justify-content: center;
				border-bottom: 1px solid #CCC;
				.ipt-search
				{
					width: 340px;
					height: 40px;
					padding-left: 20px;
					font-size: 16px;
					border: 1px solid #CCC;
				}
				.i-search
				{
					// padding-top: 10px;
					width: 40px;
					height: 40px;
					text-align: center;
					position: absolute;
					right:10px;
					cursor: pointer;
					text
					{
						font-size: 25px;
					}
				}
			}
			.change-bills-box
			{
				padding: 6px 10px;
				display: flex;
				align-items: center;
				justify-content: space-around;
				border-bottom: 1px solid #CCC;
				.item
				{
					font-size: 13px;
					position: relative;
					cursor: pointer;
					.new-bills{
						position: absolute;
						top: 0px;
						right: -15px;
						display: block;
						width: 16px;
						height: 16px;
						display: flex;
						align-items: center;
						justify-content: center;
						border-radius: 50%;
						background: rgba(253,0,23,.8);
						color: #FFF;
						font-size: 3px !important;
					}
				}
				.item:hover
				{
					color: rgba(21,123,252,.6);
				}
				.active
				{
					color: #157BFC;
				}
			}
			
			.screening-box
			{
				display: flex;
				justify-content: space-around;
				align-items: center;
				padding: 6px 10px;
				border-bottom: 1px solid #CCC;
				view
				{
					cursor: pointer;
					font-size: 14px;
					text
					{
						padding-left: 4px;
						font-size: 8px;
						color: #555;
					}
				}
				.divider
				{
					color: #ccc;
				}
			}
		}
		
		.bills-box
		{
			margin-top: 136px;
			.item
			{
				margin-top: 5px;
				background: #FFF;
				border-top: 1px solid #ccc;
				border-bottom: 1px solid #ccc;
				cursor: pointer;
				.item-t
				{
					padding: 2px 10px;
					display: flex;
					align-items: center;
					justify-content: space-between;
					border-bottom: 1px solid #ccc;
					.i-t-a-a, .i-t-a-b
					{
						display: flex;
						align-items: center;
						.i-t-a-a-name
						{
							font-size: 18px;
						}
						.i-t-a-a-sname
						{
							font-size: 18px;
							padding-left: 10px;
						}
						.i-t-a-b-from
						{
							padding: 0px 4px;
							font-size: 14px;
							line-height: 20px;
							color: #999;
							background: rgba(233,233,233,.7);
						}
						.i-t-a-b-active
						{
							font-size: 14px;
							padding-left: 10px;
							font-weight: 700;
						}
					}
				}
				.item-b
				{
					padding: 0 10px;
					.item-b-a
					{
						display: flex;
						align-items: center;
						justify-content: space-between;
						.item-b-a-a, .item-b-a-b
						{
							font-size: 16px;
							color: #555;
							text
							{
								font-size: 20px;
								padding-right: 10px;
							}
						}
					}
					.item-b-b
					{
						display: flex;
						justify-content: space-between;
						align-items: center;
						.b-b-l
						{
							.b-b-l-a, .b-b-l-b
							{
								display: flex;
								align-items: center;
								.b-b-l-sadd, .b-b-l-hand
								{
									color: #555;
									font-size: 16px;
									padding-right: 10px;
									text
									{
										font-size: 20px;
										padding-right: 10px;
									}
								}
								.b-b-l-price
								{
									color: #555;
									font-size: 20px;
									padding-right: 10px;
									font-weight: 700;
									text
									{
										font-weight: 500;
										font-size: 20px;
										padding-right: 10px;
									}
								}
								.b-b-l-arrears
								{
									font-size: 18px;
									color: red;
								}
								.divider{
									font-size: 14px;
									padding-right: 10px;
								}
							}
						}
						.b-b-r
						{
							.b-b-r-pay
							{
								font-size: 16px;
								font-weight: 700;
							}
						}
					}
				}
				.item-b:hover
				{
					background: #a6d5ea;
				}
			}
		}
	}
	.data-box::-webkit-scrollbar {/*滚动条整体样式*/
		width: 4px;     /*高宽分别对应横竖滚动条的尺寸*/
		height: 4px;
		scrollbar-arrow-color:red;
	}
	.data-box::-webkit-scrollbar-thumb {/*滚动条里面小方块*/
		border-radius: 5px;
		-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
		background: rgba(0,0,0,0.2);
		scrollbar-arrow-color:red;
	}
	.data-box::-webkit-scrollbar-track {/*滚动条里面轨道*/
		-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
		border-radius: 0;
		background: rgba(0,0,0,0.1);
	}
</style>